<template>
	<view @click="onClick" :style="{ width, height }" style="justify-content: center">
		<image v-if="cSrc" :style="{ width, height }" :src="cSrc" :mode="mode" class="img"></image>
	</view>
</template>

<script>
/**
 * cloud-image
 * @description 兼容普通资源和unicloud图片资源渲染的组件
 * @property {String} mode	图片裁剪、缩放的模式。默认为widthFix，支持所有image组件的mode值
 * @property {String} src	资源完了链接或uniCloud云存储资源的fileid
 * @property {String} width	图片的宽，默认为：100rpx
 * @property {String} height	图片的高，默认为：100rpx
 * @event {Function} click 点击 cloud-image 触发事件
 */
export default {
	name: 'cloud-image',
	emits: ['click'],
	props: {
		mode: {
			type: String,
			default() {
				return 'widthFix';
			}
		},
		src: {
			// type:String,
			default() {
				return '';
			}
		},
		width: {
			type: String,
			default() {
				return '100rpx';
			}
		},
		height: {
			type: String,
			default() {
				return '100rpx';
			}
		}
	},
	watch: {
		src: {
			handler(src) {
				if (src && src.substring(0, 8) == 'cloud://') {
					uniCloud
						.getTempFileURL({
							fileList: [src]
						})
						.then((res) => {
							this.cSrc = res.fileList[0].tempFileURL;
						});
				} else {
					this.cSrc = src;
				}
			},
			immediate: true
		}
	},
	methods: {
		onClick() {
			this.$emit('click');
		}
	},
	data() {
		return {
			cSrc: false
		};
	}
};
</script>
<style>
.img {
	/* border-radius: 50%; */
}
</style>
